<template>
  <div class="work">
    工种管理
    <div class="work-add">
      <el-button type="primary" size="small" @click="add">新增</el-button>
    </div>
    <tables :tableData="tableData" :params="params" @dels="dels">
      <template v-slot:rightBtn="row">
        <el-button type="text" @click="edit(row)">修改</el-button>
      </template>
    </tables>
    <dialogs :dialogVisible="isShow" @changeVisible="isShow = false">
      <template v-slot:content>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <el-form-item label="名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input type="number" v-model.number="ruleForm.price"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="descs">
            <el-input type="textarea" v-model="ruleForm.descs"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" size="small" @click="submit('ruleForm')">确定</el-button>
            <el-button size="small" @click="isShow=false">取消</el-button>
          </el-form-item>
        </el-form>
      </template>
    </dialogs>
  </div>
</template>
<script>
import Tables from "@/components/Table/Table.vue";
import Dialogs from "@/components/Dialog/Dialog.vue";
import request from "@/utils/request";
export default {
  components: {
    Tables,
    Dialogs,
  },
  data() {
    return {
      tableData: [],
      params: [
        {
          key: "name",
          value: "名称",
        },
        {
          key: "price",
          value: "价格",
        },
        {
          key: "descs",
          value: "描述",
        },
        {
          key: "createTime",
          value: "创建时间",
        },
      ],
      isShow: false,
      ruleForm: {
        name: "",
        price: 0,
        descs: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入名字",
            trigger: "blur",
          },
        ],
        price: [
          {
            required: true,
            message: "请输入价格",
            trigger: "blur",
          },
        ],
        descs: [
          {
            required: true,
            message: "请输入描述",
            trigger: "blur",
          },
        ],
      },
      paramsObj: {}
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取列表
    getList() {
      request.get('/jobs/list',{}).then(res => {
        console.log(res)
        this.tableData = res.data.data;
      })
    },
    add() {
      if(Object.keys(this.paramsObj).length) {
        this.ruleForm = Object.assign({},this.paramsObj)
      }
      this.isShow = true;
    },
    edit(row) {
      // 深拷贝
      this.paramsObj = Object.assign({},this.ruleForm) // 先将初始值深拷贝出来
      this.ruleForm = Object.assign({},row.data)
      this.isShow = true
    },
    //新增/ 修改
    submit(formName) {
      let url = "/jobs/create";
      if(this.ruleForm.id) {
        url = "/jobs/update";
      }
      this.$refs[formName].validate((valid) => {
        if(valid) {
          request.post(url,this.ruleForm).then(res=> {
            console.log(res)
            if(res.data.code == 200) {
              this.$message({
                type: 'success',
                message: res.data.messgae
              })
              this.isShow = false;
              this.getList()
            }
          })
        }
      })
    },
    dels(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 调用接口删除
          this.deletes(row);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    deletes(row) {
      request.post('/jobs/delete',{id: row.id}).then(res => {
        console.log(res,162)
        if(res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '删除成功' // res.data.messgae
          }); 
          this.getList()         
        }
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.work-add {
  margin-bottom: 10px;
}
</style>
